<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .small_box{
            width: 180px;
            height: 180px;
            position: relative;
            cursor: move;
        }
        .show_box{
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgb(0,0,0,0.5);
        }
        .big_box{
            margin-top: 100px;
           position: relative;
            width: 250px;
            height: 250px;
            overflow: hidden;
            display: none;
        }
        .big_box img{
            position: absolute;
        }

    </style>
</head>
<body>
<div class="small_box" id="small_box">
    <span id="show_box" class="show_box"></span>
    <img id="simg" src="img/1.jpg" style="width: 180px; height: 180px;" />
</div>
<div class="big_box" id="big_box">
    <img id="bimg" src="img/1.jpg" style="width: 600px;height: 600px;" />
</div>
<script>
    var simg = document.getElementById('simg');
    var small_box=document.getElementById('small_box');
    var box = document.getElementById('show_box');
    var big_box=document.getElementById('big_box');
    var bigimg = document.getElementById('bimg');

    simg.addEventListener("mousemove", function (e) {
        e = e || window.event;
        box.style.display = 'block';
        big_box.style.display='block';
        var lt = e.pageX - (box.offsetWidth / 2);
        var ly = e.pageY - (box.offsetHeight / 2);
        if (lt < 0) {
            lt = 0;
        }
        if (lt > (this.offsetWidth - box.offsetWidth)) {
            lt = this.offsetWidth - box.offsetWidth;
        }
        if (ly < 0) {
            ly = 0;
        }
        if (ly > (this.offsetHeight - box.offsetHeight)) {
            ly = this.offsetHeight - box.offsetHeight;
        }
        box.style.cssText = "top:" + ly + "px;left:" + lt + "px";

        var px = lt / (this.offsetWidth - box.offsetWidth);
        var py = ly / (this.offsetHeight - box.offsetHeight);

        bigimg.style.cssText = "left:" + -px * (bigimg.offsetWidth - small_box.offsetWidth) + "px;top:" + -py * (bigimg.offsetHeight - small_box.offsetHeight)+"px";

    });

    //
    // small.addEventListener("mouseout", function () {
    //     // show.style.display = 'none';
    //     // box.style.display = 'none';
    //     // bigimg.style.display='none';
    // });

    //相对于浏览器的有效区域xy轴
    //small.innerHTML="client:"+e.clientX+","+e.clientY;
    //相对于显示器的屏幕距离的xy轴的距离
    //small.innerHTML="screen:"+e.screenX+","+e.screenX;
    //相对于页面的xy轴
    //small.innerHTML="page:"+e.pageX+","+e.pageY;
    //相对于事件源（元素）的xy轴的距离
    //small.innerHTML="offset:"+e.offsetX+","+e.offsetY;

</script>
</body>
</html>